<template>
  <div class="home">
    <!-- 移除了导航栏部分 -->

    <el-main>
      <HomeBanner />
      <h2>推荐hhhhhh</h2>
      <!-- 添加轮播图 -->
      <div class="carousel-container">
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in carouselItems" :key="item" index="/src/components/test.vue">
            <img :src="item" alt="Carousel Image" class="carousel-image">
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="features">
        <h2>精选文章</h2>
        <el-row :gutter="20">
          <el-col :span="8" v-for="(articleModel, index) in articleModels" :key="index">
            <el-card shadow="hover" @click="navigateToArticle(articleModel.id)">
              <img :src="articleModel.coverImg" :alt="articleModel.title" class="feature-image">
              <h3>{{ articleModel.title }}</h3>
              <p>{{ articleModel.description }}</p>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

// 轮播图图片数据
const carouselItems = ref([
  'https://wjddbucket.oss-cn-beijing.aliyuncs.com/1c72b1bc564da29aa2b9beef26903f7.png',
  'https://wjddbucket.oss-cn-beijing.aliyuncs.com/ac5800e146784e8f1e2a783b6c7219b.png',
  'https://wjddbucket.oss-cn-beijing.aliyuncs.com/cff2f86d3e0399d91c612369cfce5b4.png'
]);

const articleModels = ref({
  title: '',
  categoryId: '',
  coverImg: '',
  content: '',
  state: ''
})

import { articleAllService } from '@/api/article'
import { useArticleStore } from '@/stores/article'
const articleAllList = async () => {
  // 获取文章分类列表
  let result = await articleAllService();
  articleModels.value = result.data
}

articleAllList();

const navigateToArticle = (id) => {
  router.push({ name: 'ArticleDetail', params: { id } });
};
</script>

<style scoped>
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 10px;
  /* 减少边距 */
}

.features {
  padding: 10px;
  /* 减少内边距 */
}

.feature-image {
  width: 300px;
  height: 300px;
}

.carousel-container {
  padding: 10px;
  /* 减少内边距 */
}

.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
</style>